<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!--引入本地 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
		<title>缴费记录</title>
	</head>
	<body>
		<div id="app">
			<div class="topbox">
				<div class="top">
					<!-- 开始-结束时间 -->
					<div class="startend">
						<div>
							<el-date-picker v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="开始日期">
							</el-date-picker>
						</div>
						<div></div>
						<div>
							<el-date-picker v-model="value2" type="date" value-format="yyyy-MM-dd" placeholder="结束日期">
							</el-date-picker>
						</div>

						<!-- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker> -->
					</div>
					<!-- 按钮 -->
					<div class="btns">
						<button class="btn" @click="searchdata"><i class="el-icon-search"></i>查询</button>
						<button class="btn" @click="chongzhi"><i class="el-icon-refresh-right"></i>重置</button>
					</div>
				</div>
			</div>
			<!-- 表格 -->
			<div class="main"  >
				<div v-infinite-scroll="nextPage" style="overflow:auto;height: 1000px"    >
					<div class="card" v-for="(item,index) in listdata" >
						<div class="contents">
							<span>姓名：</span>
							<span>{{item.khmc}}</span>
						</div>
						<div class="contents">
							<span>购水量：</span>
							<span>{{item.gsl}}</span>
						</div>
						<div class="contents">
							<span>金额：</span>
							<span>{{item.fee}}元</span>
						</div>
						<div class="contents" >
							<span>订单编号：</span>
							<span>{{item.ddbh}}</span>
						</div>
						<div class="contents">
							<span>交易时间：</span>
							<span>{{item.xdsj}}</span>
						</div>

						<div class="contents" v-if="item.sfykdzfp != '1'">
							<span>操作：</span>
							<span><a @click="kaipiao(item)">开票</a></span>
						</div>

						<div class="contents" v-if="item.sfykdzfp == '1'">
							<span>操作：</span>
							<span><a @click="view_fapiao(item)">查看电子发票</a></span>
						</div>
					</div>
				</div>
			</div>

		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				value1: '',
				value2: '',
				listdata:[],
				pageNumber:1,
			},
			created() {
				this.loadData();
			},
			methods: {
				async view_fapiao(item){
					let index = loading()
					const res = await postWebCustom(getTableId("2747"),{ddbh:item.ddbh});
					index.close();
					if(res.code == 0){
						this.$message(res.msg);
					}else {
						window.open("https://"+res.data);
					}
				},
				kaipiao(item){
					window.location.href = "/admin/html/module/hetianjiangrun/html/children/InvoiceApply.html?ddbh="+item.ddbh+"&fee="+item.fee;
				},
				chongzhi(){
					this.pageNumber = 1;
					this.value1 = "";
					this.value2 = "";
					this.loadData();
				},
				searchdata(){
					this.pageNumber = 1;
					this.listdata = [];
					this.loadData();
				},
				nextPage(){
					this.pageNumber++;
					this.loadData();
				},
				async loadData () {
					const res = await postWebCustom(getTableId("1929"),{ksrq:this.value1,jsrq:this.value2,pageNumber:""+this.pageNumber});
					this.listdata = [...this.listdata,...res.data.rows];
				}
			},

		})
	</script>
	<style type="text/css">
		body {
			margin: 0;
		}

		.topbox {
			width: 100%;
			position: fixed;
			z-index: 10;
			background-color: #fff;
		}

		.top {
			padding: 10px;
		}

		.startend {
			display: grid;
			grid-template-columns: repeat(1, 1fr 10px 1fr);
		}
		
		.startend div {
			width: 100%;
			overflow: hidden;
			border-right: 1px solid #DCDFE6;
			border-radius: 4px;
		}

		@media (min-width: 460px) {
			.startend div {
				border: none;
			}
		}

		.btns {
			display: flex;
			margin-top: 10px;
		}

		.btn {
			background-color: #409eff;
			color: #fff;
			margin-right: 10px;
			padding: 10px 30px;
			border: none;
			border-radius: 4px;
		}

		.main {
			padding: 110px 10px 10px 10px;
		}

		.card {
			border: 1px solid #eee;
			border-radius: 20px;
			padding: 10px;
			box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
			margin-bottom: 10px;
		}

		.contents {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(1, 80px 1fr);
		}

		.contents span {
			height: 40px;
			line-height: 40px;
			/* text-align: right; */
		}

		.contents a {
			text-decoration: none;
			color: #409eff;
		}
	</style>
</html>
